<script setup lang="ts">
import { getChannelOptionsApi } from '@/apis/article';
import type { SelectItem } from '@/types/article';
import { computed, onMounted, ref, watch } from 'vue';

interface PropsChannel {
  width?: string,
  modelValue: number | string | undefined
}

// 定义组件的props，并设置默认值
// 使用 withDefaults 函数为 defineProps 定义的 PropsChannel 类型的属性提供默认值
// 这样做可以确保组件在没有接收到某些prop时，能够正常工作，避免因为缺少prop而导致的错误
const props = withDefaults(defineProps<PropsChannel>(), {
  // 设置 width 属性的默认值为 '100%'
  // 这意味着如果没有传递 width 属性，那么它的值将会是 '100%'
  width: '100%',
})

// 获取频道
// 定义一个可变的响应式数组，用于存储频道选项
const channelOptions = ref<SelectItem[]>([])
/**
 * 异步获取频道选项
 * 该函数调用getChannelOptionsApi接口，获取频道数据，并将其赋值给channelOptions
 */
const getChannelOptions = async () => {
  const res = await getChannelOptionsApi()
  channelOptions.value = res.data.channels
}

onMounted(() => {
  getChannelOptions()
})

//  回传数据
const emits = defineEmits(['update:modelValue'])

// 使用 computed 计算属性来获取当前选中的频道名称  来确保v-model
const val = computed({
  get: () => props.modelValue,
  set: (value) => {
    emits('update:modelValue', value)
  }
})

//  监听modelValue的变化  同步到val
watch(() => props.modelValue, (newValue) => {
  val.value = newValue
})

// 确保选择频道时触发 change 事件
const handleChange = (value: number | string | undefined) => {
  emits('update:modelValue', value);
};
</script>

<template>
  <el-select v-model="val" :style="`width${props.width}px; height: 40px`" clearable placeholder="请选择"
    @change="handleChange">
    <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id">
    </el-option>
  </el-select>
</template>

<style scoped>
/*  在这里编写组件的样式 */
</style>
